<template>
  <div class="contes">
    <div class="sq">额度授信</div>
    <div style="margin-top: 45px; margin-left: 20px">
      <el-tabs v-model="page.creditStatus" @tab-click="stepzx" class="utbsa">
        <el-tab-pane label="待授信" name="0">
          <div class="con_table">
            <el-table
              :data="tableData"
              :header-cell-style="{ background: '#f5fafd', color: '#818EA8' }"
              style="width: 100%"
            >
              <!-- 列表数据 -->
              <el-table-column type="index" label="序号" width="50px">
                <template slot-scope="scope">
                  <span
                    >{{ (page.current - 1) * page.size + (scope.$index + 1) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="applyTime" label="申请时间">
              </el-table-column>
              <el-table-column prop="enterpriseName" label="企业名称">
              </el-table-column>
              <!-- 列表数据end -->
              <!-- 操作按钮 -->
              <el-table-column fixed="right" label="操作" width="250">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="shouxinadut(scope.row)"
                    >查看企业详情</el-button
                  >
                  <el-button type="text" size="small" @click="xaiz(scope.row)"
                    >下载资料</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
        <el-tab-pane label="已授信" name="1">
          <div class="con_sousuo">
            <el-form
              :inline="true"
              :model="page"
              class="demo-form-inline"
              label-width="100px"
            >
              <el-form-item label="企业名称:">
                <el-input placeholder="企业名称" v-model="page.enterpriseName">
                </el-input>
              </el-form-item>
              <!-- 搜索按钮 -->
              <div class="ann">
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  @click="creditLimit(formsq)"
                  >查询</el-button
                >
                <el-button
                  type="primary"
                  plain
                  class="gx"
                  @click="creditLimit()"
                  ><img
                    src="../../assets/sx.png"
                    style="width: 17px; height: 18px"
                  />更新</el-button
                >
              </div>

              <div class="con_table" style="margin-left: 34px;">
                <el-table
                  :data="tableData"
                  :header-cell-style="{
                    background: '#f5fafd',
                    color: '#818EA8',
                  }"
                  style="width: 100%"
                >
                  <!-- 列表数据 -->
                  <el-table-column type="index" label="序号" width="90px">
                    <template slot-scope="scope">
                      <span
                        >{{
                          (page.current - 1) * page.size + (scope.$index + 1)
                        }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="enterpriseName" label="企业名称">
                  </el-table-column>
                  <el-table-column prop="creditTime" label="授信时间">
                  </el-table-column>
                  <el-table-column prop="creditLimit" label="初始额度(万元)">
                  </el-table-column>
                  <el-table-column prop="surplusLimit" label="剩余额度(万元)">
                  </el-table-column>
                  <!-- 列表数据end -->
                  <!-- 操作按钮 -->
                  <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="shouxinadut(scope.row)"
                        >企业详细信息</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>
          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="page.PageRange"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
          <!-- 分页end -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { getCreditInfoList } from "@/api/leagues/app";
export default {
  data() {
    return {
      formsq: {},
      tableData: [],
      // 分页
      page: {
        current: 1, //默认从第一页开始
        PageRange: [10, 20, 30], //规定多少个页算一个区间
        total: 0,
        size: 10,
        enterpriseName: "",
        creditStatus: "0",
      },
    };
  },

  mounted() {
    this.creditLimit();
  },
  methods: {
    indexMethod(index) {
      return index + 1 * 1;
    },
    indexMethod2(index) {
      return index + 1 * 1;
    },
    shouxinadut(row) {
      console.log(row);
      this.$router.push({
        name: "quertCustom",
        query: {
          id: row.enterpriseId,
          id2:row.id
        },
      });
    },
    stepzx() {
      this.creditLimit();
    },
    creditLimit() {
      getCreditInfoList(this.page).then((response) => {
        if (response) {
          var that = this;
          that.tableData = response.data.data.records;
          this.page.size = response.data.data.size;
          this.page.current = response.data.data.current;
          this.page.total = response.data.data.total;
          // that.$message({
          //   duration: 500,
          //   message: "查询成功",
          //   type: "success",
          // });
        } else {
          //  that.$message.success(response.data.data.msg);
          that.$message({
            duration: 600,
            message: response.data.data.msg,
            type: "warning",
          });
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.creditLimit();
      console.log(`当前页: ${val}`);
    },
    PageRangeDate() {
      this.tableData.forEach((ele) => {
        this.PageRange.push(ele.id);
      });
      console.log(this.PageRange, "tab");
    },
    // 分页end
  },
};
</script>
<style scoped>
.contes {
  width: 1200px;
  height: 882px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px 6px 10px 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}
.sq {
  height: 24px;
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #051232;
  line-height: 24px;
  padding-top: 33px;
  padding-left: 21px;
}
.con_sousuo {
  margin-left: -23px;
}
.ann {
  float: right;
  margin-right: 62px;
}
>>> .el-tabs__nav {
  /* width: 311px; */
  height: 40px;
  border-radius: 20px;
  text-align: center;
}
>>> .el-tabs__content {
  margin-top: 11px;
}
/*tabs 去掉el-tab-pane切换时的蓝色下划线*/
>>> .el-tabs__active-bar {
  background-color: transparent !important;
}
>>> .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}
>>> .el-tabs__header {
  border-radius: 20px;
  border: 1px solid #bdc3ca;
  width: 348px;
}
>>> .el-step.is-horizontal .el-step__line {
  border-top: 2px dashed #ccd1de;
  height: 0;
  background-color: transparent;
}
>>> .el-step.is-center .el-step__line {
  top: 50%;
}
>>> .el-step__icon.is-text {
  width: 47px;
  height: 47px;
}
>>> .el-tabs__nav {
  width: 311px;
  height: 40px;
  background: transparent !important;
  border-radius: 20px;
  text-align: center;
}
.el-progress {
  width: 297px;
}
>>> .el-progress-bar__inner {
  background-color: #48dc76 !important;
}
>>> .el-tabs__item.is-active {
  background: #0075ff;
  box-shadow: 0px 3px 8px 0px rgba(0, 117, 255, 0.2);
  border-radius: 20px;
}
>>> .el-tabs__item {
  width: 150px;
  height: 40px;
  color: #8995ad;
}
>>> .el-tabs__item.is-active {
  color: #ffffff;
}
>>> .el-tabs el-tabs--top {
  margin-left: 47px;
}
</style>
